import { Component, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { queryOccupationRecordList } from '@/api/insurance/serveCompany'
import type {
    InsurePeriodServeCompanyDto,
    OccupationRecordDto
} from '@/api/insurance/serveCompany/types'
import { Collapse, CollapsePanel, DatePicker, Empty, Timeline, TimelineItem } from 'ant-design-vue'
import PreviewVideoOrImage from '@/components/preview-media/PreviewVideoOrImage'
import { OccupationRecordTypeCnEnum, OccupationStatusCnEnum } from '@/const/enum'

@Component
export class OccupationRecord extends Render {
    @Prop() serveCompanyInfo!: InsurePeriodServeCompanyDto

    date = ''

    recordData = [] as OccupationRecordDto[]

    auditColor = {
        0: '#9EAFFA',
        1: 'green',
        2: '#FF7642'
    }

    @Watch('serveCompanyInfo')
    handleWatchServeCompanyInfo() {
        if (this.serveCompanyInfo?.serveCompanyId) {
            this.initData()
        }
    }

    async initData() {
        const res = await queryOccupationRecordList({
            periodServeCompanyId: this.serveCompanyInfo.serveCompanyId,
            queryMonth: this.date
        })
        this.recordData = res
    }

    renderAuditData(data: OccupationRecordDto) {
        return (
            <div class="bg-fill p-16px">
                <div class="flex items-center lh-loose">
                    <div class="text-black-300">视频/照片：</div>
                    <div>
                        {data.fileUrls?.length ? <PreviewVideoOrImage src={data.fileUrls} /> : '--'}
                    </div>
                </div>
                <div class="flex items-center lh-loose">
                    <div class="text-black-300">申请人：</div>
                    <div>{data.applyName}</div>
                </div>
                <div class="flex items-center lh-loose">
                    <div class="text-black-300">工种：</div>
                    <div>{data.occupationNames?.join('，')}</div>
                </div>
                <div class="flex items-center lh-loose">
                    <div class="text-black-300">审批人：</div>
                    <div>{data.auditName}</div>
                </div>
                {data.auditStatus === OccupationStatusCnEnum.已驳回 ? (
                    <div class="flex items-center lh-loose">
                        <div class="text-black-300">驳回理由：</div>
                        <div>{data.auditRemark}</div>
                    </div>
                ) : (
                    <></>
                )}
            </div>
        )
    }

    renderReplenishData(data: OccupationRecordDto) {
        return (
            <div class="bg-fill p-16px">
                <div class="flex items-center lh-loose">
                    <div class="text-black-300">工种：</div>
                    <div>{data.occupationNames?.join('，')}</div>
                </div>
                <div class="flex items-center lh-loose">
                    <div class="text-black-300">操作人：</div>
                    <div>{data.applyName}</div>
                </div>
            </div>
        )
    }

    render() {
        return (
            <>
                <div class="flex justify-between">
                    <div class="text-lg font-bold">工种审核记录</div>
                    <DatePicker
                        v-model:value={this.date}
                        format="YYYY-MM"
                        valueFormat="YYYY-MM"
                        picker="month"
                        onChange={this.initData}
                    ></DatePicker>
                </div>
                <div class="mt-20px">
                    {this.recordData.length ? (
                        <Timeline >
                            {this.recordData.map((i) => {
                                return (
                                    <TimelineItem
                                        color={
                                            this.auditColor[
                                                i.auditStatus as keyof typeof this.auditColor
                                            ]
                                        }
                                    >
                                        <Collapse ghost>
                                            <CollapsePanel
                                                v-slots={{
                                                    header: () => {
                                                        return (
                                                            <div class="-mt-10px">
                                                                <div>
                                                                    {
                                                                        OccupationStatusCnEnum[
                                                                            i.auditStatus
                                                                        ]
                                                                    }
                                                                </div>
                                                                <div class="text-black-300">
                                                                    {i.createTime}
                                                                </div>
                                                            </div>
                                                        )
                                                    }
                                                }}
                                            >
                                                {i.type === OccupationRecordTypeCnEnum.工种审核
                                                    ? this.renderAuditData(i)
                                                    : this.renderReplenishData(i)}
                                            </CollapsePanel>
                                        </Collapse>
                                    </TimelineItem>
                                )
                            })}
                        </Timeline>
                    ) : (
                        <Empty />
                    )}
                </div>
            </>
        )
    }
}

export default toNative<{ serveCompanyInfo: InsurePeriodServeCompanyDto }, {}>(OccupationRecord)
